<template>
  <div>
    <a-button type="primary" @click="showModal" class="mb">
      新建
    </a-button>
    <a-modal
      title="Title"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
    <template slot="footer">
        <a-button key="back" @click="handleCancel">
          cancle
        </a-button>
        <a-button key="OK" type="primary" :loading="loading" @click="handleOk">
          OK
        </a-button>
      </template>
      <div>
        <label>工单名称：{{name}}</label>
      </div>

      <div>
        <label>审批序号：</label>
        <a-input-number id="inputNumber" v-model="sequence" :min="1" :max="100" @change="onChange" />
      </div>

      <div>
        <label>审批类型：</label>
        <a-select default-value="1" style="width: 200px" @change="handleChangeApproveType" v-model="approve_type_id">
          <a-select-option v-for="i in approveTypeList" :key="i.id">
            {{ i.name }}
          </a-select-option>
        </a-select>
      </div>

      <div>
        <label>审批人员：</label>
        <a-select
          show-search
          placeholder="Select a person"
          option-filter-prop="children"
          style="width: 200px"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          v-model="approve_id"
        >
          <a-select-option v-for="i in approveLists" :value="i.id" :key="i.id">
            <span v-show="flag==1">{{ i.username }}</span>
            <span v-show="flag==2">{{ i.name }}</span>
          </a-select-option>
        </a-select>
      </div>


    </a-modal>
  </div>
</template>
<script>
import { getUserList, getRoleList } from '@/http/api.js'

import axios from 'axios'
export default {
  data() {
    return {
      id:this.$route.query.id,
      name:this.$route.query.name,
      flowconf:'',
      sequence:'',
      approve_type_id:'',
      approve_id:'',
      flag:1,
      visible:false,
      loading: false,
      editData: {       // 添加和修改用户时，弹出框中进行双向绑定的数据
        flowconf_id: '',
        flowconf: '',
        sequence: 1,
        approve_id:'',
        approve_type_id:''
      },
      flowconfId:'',

      approveTypeList:[
        {
          "id": 1,
          "name": "指定人员审批",
        },
        {
          "id": 2,
          "name": "角色组审批",
        }
      ],
      approveLists:[],

    };
  },
  // props:['visible','editData'],
  created(){
    this.handleChangeApproveType(1)
  },

  methods: {
    showModal() {

      this.visible = true;
    },

    // 弹出框点击确认时调用此函数
    handleOk(e) {
       axios.post('http://127.0.0.1:8000/work/approve/',{'flowconf_id':this.id,'sequence':this.sequence,'approve_type_id':this.approve_type_id,'approve_id':this.approve_id}).then(res=>{
        console.log(res.data)
        alert('添加成功')
      })
      this.loading = true;
      setTimeout(() => {
        this.visible = false;
        this.loading = false;
      }, 3000);
    },

    // 弹出框点击取消时调用此函数
    handleCancel(e) {
      this.visible = false;
    },


    onChange(value) {
      console.log('changed', value);
      // this.editData.approve_type_id = value
    },

    handleChangeApproveType(value){
      // console.log("handleChangeApproveType")
      // console.log(`selected ${value}`);
      this.editData.approve_type_id = value
      if(value=='1'){
        getUserList().then(resp =>{
          this.flag=1
          console.log(resp)
          this.approveLists = resp
        }).catch(err =>{
          alert(err)
        })
      }else {
        getRoleList().then(resp =>{
          this.flag=2
          this.approveLists = resp
          console.log(resp)
        }).catch(err =>{
          alert(err)
        })
      }

    },

    // 带搜索的select中绑定方法
    handleChange(value) {
      this.editData.approve_id = value
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

  },
};
</script>
